<template>
  <div class="map-container">
    <l-map ref="map" class="map" :zoom="zoom" :center="center" >
      <!-- 1图层控制器
          collapsed:false 展开图层控制器；默认true：收缩图层控制器
      -->
      <l-control-layers position="topright" :collapsed="false"></l-control-layers>
      <!-- 1.1基础图层 -->
      <l-tile-layer
        v-for="tile in tileProviders"
        ref="baseLayer"
        :key="tile.name"
        :name="tile.name"
        :visible="tile.visible"
        :url="tile.url"
        :attribution="tile.attribution"
        :options="tile.options"
        layer-type="base"
      />

      <!-- 1.3覆盖图层 -->
      <l-layer-group layer-type="overlay" name="<span style='color: red'>静态几何图形</span>">
        <!-- 圆 -->
        <l-circle :lat-lng="circle.center" :radius="circle.radius" :l-style="circle.style"/>
      </l-layer-group>
    </l-map>
  </div>
</template>
<script>
import {
  LMap,
  LTileLayer,
  LControlLayers,
  LLayerGroup,
  LCircle
} from 'vue2-leaflet'
export default {
  name: 'MapControlLayer',
  data() {
    return {
      zoom: 12,
      center: [39.907103, 116.396885],
      // 可选的底图
      tileProviders: [
        {
          name: 'OpenStreetMap',
          visible: false,
          url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          attribution:
            '&copy <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        },
        {
          name: 'OpenTopoMap',
          visible: false,
          url: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
          attribution: 'OpenTopoMap'
        },
        {
          name: 'mapbox',
          visible: true,
          url:
            'https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token={token}',
          options: {
            prefix: 'myMap' ,
            subdomains: ['1', '2', '3', '4'],
            token:
              'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
          },
          attribution: 'mapbox'
          
        },
        {
          name: '高德',
          visible: false,
          url:
            'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
          options: {
            subdomains: ['1', '2', '3', '4']
          },
          attribution: '高德'
        },
        {
          name: '高德卫星',
          visible: false,
          url:
            'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
          options: {
            subdomains: ['1', '2', '3', '4']
          },
          attribution: '高德卫星'
        },
        {
          name: '离线地图',
          visible: false,
          url:
            'http://10.121.132.187:8001/map/simple/{z}/{x}/{y}.png',
          
          attribution: '离线地图'
        }
      ],
      circle: {
        center: [39.907103, 116.296885],
        radius: 500,
        style: { color: 'red' }
      }
    }
  },
  components: {
    LMap,
    LTileLayer,
    LControlLayers,
    LLayerGroup,
    LCircle
  },
  methods: {
  },
  mounted() {
    this.$nextTick(() => {
    })
  },
  beforeDestroy() {
    this.$refs.map.mapObject.remove()
  }
}
</script>
